// 导入必要的类型导入声明
import type { ThunkDispatch } from "redux-thunk";
import type { AnyAction } from "redux";
import type { RootState } from "../store";

import { useEffect } from "react";
// 导入redux的useSelector和useDispatch
import { useSelector, useDispatch } from "react-redux";
// 导入方法
import { getListAction } from "../store/modules/ChannelStore";


const GetChannelPlus = () => {
  const { list } = useSelector((state: RootState) => state.channel);
  const dispatch = useDispatch<ThunkDispatch<RootState, unknown, AnyAction>>();

  useEffect(() => {
    // 派发action
    dispatch(getListAction());
  }, [dispatch]);
  return (
    <>
      <p>这是获取渠道列表的升级版。用了Store</p>
      <ul style={{ listStyle: "none", display: "flex" }}>
        {list.map((item: { id: number; name: string }) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </>
  );
};
export default GetChannelPlus;
